<template>
  <div class="layout-wrapper" :class="containerClass">
    <AppTopbar></AppTopbar>
    <AppSidebar></AppSidebar>
    <div class="layout-main-container">
      <div class="layout-main">
        <Main />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="LayoutDefault">
  import { computed } from 'vue'
  import Main from '@/layouts/components/Main/index.vue'
  import AppTopbar from '@/layouts/components/TopBar/AppTopbar.vue'
  import AppSidebar from '@/layouts/components/Sidebar/AppSidebar.vue'
  import { useLayout } from '@/layouts/components/composables/layout'
  const { layoutConfig, layoutState, isSidebarActive } = useLayout()

  const containerClass = computed(() => {
    return {
      'layout-overlay': layoutConfig.menuMode === 'overlay',
      'layout-static': layoutConfig.menuMode === 'static',
      'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
      'layout-overlay-active': layoutState.overlayMenuActive,
      'layout-mobile-active': layoutState.staticMenuMobileActive,
    }
  })
</script>
